<!DOCTYPE html>
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>threesixty.js-360度产品图片预览jQuery插件</title>
<link rel="stylesheet" href="./threesixty/bootstrap-3.3.4.css">
<link rel="stylesheet" href="./threesixty/font-awesome.4.6.0.css">
<link rel="stylesheet" type="text/css" href="./threesixty/default.css">
<link rel="stylesheet" href="./threesixty/threesixty.css">
<style type="text/css">
		#container{
			padding-top: 50px;
		}
	</style>
<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
<header class="htmleaf-header">
<h1>threesixty.js-360度产品图片预览jQuery插件 <span>A jQuery 360 image slider plugin</span></h1>
<div class="htmleaf-demo center">
<a href="index.html">Default Settings</a>
<a href="index2.html">Custom controls</a>
<a href="index3.html">Responsive</a>
<a href="index4.html" class="current">Fullscreen</a>
</div>
</header>
<section class="container-fluid" id="container">
<div class="threesixty product1" style="width: 1000px; height: 447px;"><div class="nav_bar">
<a href="index4.html#" class="nav_bar_previous">previous</a>
<a href="index4.html#" class="nav_bar_play">play</a>
<a href="index4.html#" class="nav_bar_next">next</a></div>
<a href="index4.html#" style="z-index: 12; display: block; position: absolute; background: url(&quot;threesixty/fs-white.png&quot;) 0px -20px no-repeat; width: 20px; height: 20px; text-indent: -99999px; right: 5px; bottom: 5px;">Fullscreen</a>
<div class="spinner" style="margin-top: 208.5px; display: none;">
<span>100%</span>
</div>
<ol class="threesixty_images" style="display: block;">
</ol>
</div>
</section>
<script src="./threesixty/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="./threesixty/threesixty.min.js"></script>
<script type="text/javascript" src="./threesixty/threesixty.fullscreen.js"></script>
<script type="text/javascript">
    window.onload = init;

    var product;
    function init(){

      product1 = $('.product1').ThreeSixty({
        totalFrames: 52,
        endFrame: 30,
        currentFrame: 1,

        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath:'threesixty/',
        filePrefix: '',
        ext: '.png',
        height: 447,
        width: 1000,
        navigation: true,
        disableSpin: false,
        plugins: ['ThreeSixtyFullscreen']
      });

    }

  </script>

</body></html>